<template>
  <div>
    <CityHeader></CityHeader>
    <CitySearch :cities="data.cities"></CitySearch>
    <city-list :cities="data.cities" :hot="data.hotCities" :letter="letter"></city-list>
    <city-alphabet
        :cities="data.cities"
        :l="letter"
        @change="handleLetterChange"
    >
    </city-alphabet>
  </div>
</template>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
import axios from 'axios'
import {onMounted, ref, reactive} from "vue";

export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  setup() {
    const {letter, handleLetterChange} = useLetterLogic()
    const {data} = useCityLogic()
    return {data, letter, handleLetterChange}
  }
}

function useCityLogic() {
  const data = reactive({
    cities: {},
    hotCities: [],
    letter: ''
  })

  // async function getCityInfo() {
  //   let result = await axios.get('/api/city.json')
  //   result = result.data
  //   if (result.ret && result.data) {
  //     const resdata = result.data
  //     console.log(resdata)
  //     // data.cities = resdata.cities
  //     // data.hotCities = resdata.hotCities
  //   }
  // }

  async function getCity() {
    let res = await axios.get('http://192.168.10.73:8880/city/acronym')
    console.log(res)
    const result = res.data
    if (result.status === 10000) {
      data.cities = result.content
    }
  }

  async function getHotCity() {
    let res = await axios.get('http://192.168.10.73:8880/city/hotcity')
    console.log(res)
    const result = res.data
    if (result.status === 10000) {
      data.hotCities = result.content
    }
  }

  onMounted(() => {
    // getCityInfo();
    getCity();
    getHotCity()
  })
  return {data}
}

function useLetterLogic() {
  const letter = ref('')

  function handleLetterChange(selected) {
    letter.value = selected
  }

  return {letter, handleLetterChange}
}
</script>

<style scoped lang="stylus">

</style>
